<template>
	<view class="container">
		<view class="header-backgroud-box">
			<text class="header-backgroud-box-title">yzLinker</text>
			<text class="header-backgroud-box-content">基于ESP8266的通用控制器</text>
		</view>
		<uni-card :title="add_timer_action?'添加定时器':'修改定时器'" class="device-list-panel">
			<view class="add-timer-line">
				<text>触发时间：</text>
				<picker class="add-timer-timeout" mode="time" :value="timer_timeout" @change="onAddTimerTimeoutPicker">
					<view class="uni-input">{{timer_timeout}}</view>
				</picker>
			</view>
			<view class="add-timer-line">
				<text>触发方式：</text>
				<radio-group class="add-timer-trigger" @change="onAddTimerTypeChange">
					<radio value="0" :checked="timer_type==0?true:false">周期触发</radio>
					<radio value="1" :checked="timer_type==1?true:false">一次触发</radio>
				</radio-group>
			</view>
			<view class="add-timer-switch-box">
				<view v-if="device_switch_num!=1">
					<text>开关选择：</text>
					<view class="add-timer-switch-line">
						<checkbox-group v-for="(item,index) in timer_checkbox_list" :key="item.id"
							@change="addTimerSwitchChange(item.id,$event)">
							<checkbox :value="item.id+''" :checked="item.check">{{item.text}}</checkbox>
						</checkbox-group>
					</view>
				</view>
				<template v-if="device_switch_num==1">
					<my-switchs :type="parseInt(device_switch_type)" :select="timer_selected_switch_list[0].status"
						@status="timer_selected_switch_list[0].callback(0,$event)"></my-switchs>
				</template>
				<template v-else>
					<view class="add-timer-select-checkbox-tips" v-if="timer_selected_switch_list.length == 0">
						<text>请选择操作开关</text>
					</view>
					<view class="add-timer-switch-select-box" v-else v-for="(item,index) in timer_selected_switch_list" :key="item.id">
						<my-switchs :type="parseInt(device_switch_type)" :title="item.title" :select="item.status"
							@status="item.callback(index,$event)"></my-switchs>
					</view>
				</template>
			</view>
			<view class="add-timer-btn">
				<button @click="onAddTimerCancelBtn">取消</button>
				<button v-if="!add_timer_action" @click="onAddTimerDeleteBtn">删除</button>
				<button :type="'primary'" @click="onAddTimerAddModifyBtn">{{add_timer_action?'添加':'修改'}}</button>
			</view>
		</uni-card>
	</view>
</template>

<script>
	import {
		commonData
	} from '@/utils/common.js'
	let tools = require('@/utils/tools');
	export default {
		data() {
			return {
				timer_timeout:"12:00",		//触发时间设置变量
				timer_type:0,				//定时器类型绑定变量
				device_switch_num:2,		//当前设备支持开关数量，由commonData传入
				device_switch_type:3,		//当前设备支持开关类型，由commonData传入
				timer_checkbox_list:[],		//当前设置定时器开关复选框列表
				
				add_timer_action:false,		//添加、修改标志，页面加载时判断
				
				timer_selected_switch_list:[], 		//当前定时器相关开关列表
			}
		},
		/*********************************
		*	页面加载相关初始化代码
		* 	@param {String} param 为设备控制页面传入参数。如果不带参数表示为通过单击添加
		*                         定时器按钮进入此页面；如歌带有index参数，则表示通过单击
		*                         相应的定时器条目进行此页面，此时index表示当前选择的定时
		*                         器在commonData.timerList中的索引。 
		* *********************************/
		onLoad(param) {
			console.log(param)
			console.log(param.index)
			
			//传入设备类型，以便开关进行适配
			this.device_switch_type = commonData.curDeviceType;
			this.device_switch_num = commonData.curDeviveNum;
			
			//此处需要根据commondData中的TimerList数据对页面进行初始化
			this.device_tiemr_list = []
			for(let i in commonData.timerList){
				let timeritem = commonData.timerList[i];
				this.device_tiemr_list.push(timeritem)
			}
			
			//检测进入方式，如果index不存在，则以添加方式进入此页面
			if(param.index == undefined){
				//当前界面为添加定时器界面
				console.log('添加操作')
				this.add_timer_action = true;	
			}else{
				//当前界面为修改定时器界面
				console.log('修改操作：index:'+param.index)
				this.add_timer_action = false;
				this.timer_modify_index = param.index;
			}
			//界面初始化
			this.initSwitchCheckbox();
		},
		methods: {
			/******************
			  初始化界面相关功能代码
			******************/
			initSwitchCheckbox(){
				//当开关个数为1个时，无需定时器控制开关复选框
				if (this.device_switch_num > 1) {
					this.timer_checkbox_list = []
					for (let i = 0; i < this.device_switch_num; i++) {
						let item = {
							id: i,					//定时器复选框标识
							check: false,			//定时器复选框默认不选中
							text: '开关' + (i + 1)	//定时器复选框显示文本
						}
						//开出所有开关对应的复选框
						this.timer_checkbox_list.push(item)
					}
					
					//当开关个数为2时，进行特殊处理				
					if (this.device_switch_num == 2) {
						//开关个数为2时，修改显示文本为左侧状态和右侧状态
						this.timer_checkbox_list[0].text = '左侧状态';
						this.timer_checkbox_list[1].text = '右侧状态';
					}
				}
			},
			//统一进行返回上一层处理
			goBackToControl(){
				uni.navigateBack()
			},
			
			/******************
			  UI相关功能代码
			******************/
			//选择触发时间后Picker回调函数
			onAddTimerTimeoutPicker(e){
				//console.log(e.detail)
				this.timer_timeout = e.detail.value;
			},
			//触发方式变化RadioBox回调函数
			onAddTimerTypeChange(e) {
				//console.log('change timer type:' + e.detail.value)
				this.timer_type = e.detail.value;
			},
			//当前定时器所控制的开关选择复选框CheckBoxGroup回调函数
			addTimerSwitchChange(id, e) {
				//console.log(id, e.detail)
				//console.log(JSON.stringify(this.timer_checkbox_list))
				this.timer_checkbox_list[id].check = e.detail.value.length == 0 ? false : true;
				//console.log(JSON.stringify(this.timer_checkbox_list))
				//根据所选择的复选框显示对应的开关
				this.ShowCheckBoxSelectedSwitchs()
			},
			//选择定时器控制开关复选框CheckBoxGroup变化时，根据实际选择的开关显示对应开关
			ShowCheckBoxSelectedSwitchs() {
				let temp = null;
				//先保存旧的选中开关的状态，以免新开关选择后旧的选中状态丢失
				let old_switch_list = this.timer_selected_switch_list;	//保存旧的选中开关内容
				
				if(this.device_switch_num == 1){
					//当前只有一个开关，直接设置开关显示状态为显示
					this.timer_selected_switch_list = [{
						'id': 0,
						'status': 0,
						'title': '开关状态：',
						'callback': this.onSwitchChange  //当开关状态发生变化时，回调通知的函数
					}]
				}else{
					//当前设备开关数量大于一个，清空选中开关列表
					//由于要按照id顺序排列显示的开关，所以先清空列表，然后再添加
					//否则如果直接使用push，则会产生先显示开关3，再显示开关1的情况
					this.timer_selected_switch_list = []
				}
				
				//根据最新的复选框列表产生新的选中开关列表
				for (let i in this.timer_checkbox_list) {
					let check_item = this.timer_checkbox_list[i];
					if (check_item.check) {
						//当前复选框被选中
						//构造要显示的开关的数据结构
						temp = {
							'id': check_item.id,  
							'status': 0,									//开关默认状态，为0状态
							'title': check_item.text + '：',				//开关显示文本，根据复选框显示，多加个冒号
							'callback': this.onSwitchChange					//当开关状态发生变化时，回调通知的函数
						}
						//如果变动前有选中的开关在显示
						if(old_switch_list.length != 0){
							console.log('restore switch status')
							//遍历保存的选中开关，找出与当前checkbox对象对应的开关项，恢复开关状态
							for(let t in old_switch_list){
								let old_switch_item = old_switch_list[t];
								if(old_switch_item.id == check_item.id){
									//发现当前checkbox对象对应开关之前保存，恢复开关状态
									temp.status = old_switch_item.status;
								}
							}
						}
						//将当前构造的要显示的开关数据结构加入当前定时器控制选中开关列表，以便显示
						this.timer_selected_switch_list.push(temp)
					}
				}
			},
			//开关状态发生变化时的回调函数
			onSwitchChange(index, value) {
				console.log('index:' + index +";id:"+this.timer_selected_switch_list[index].id+";value:" + value)
				this.timer_selected_switch_list[index].status = parseInt(value);
			},
			
			//确认添加或修改按钮回调函数
			onAddTimerAddModifyBtn(e){
				let used_switch = []	//用于收集选择的开关状态的列表
				
				//遍历被选中的开关列表，将开关状态保存
				for(let i in this.timer_selected_switch_list){
					let temp_item = this.timer_selected_switch_list[i]
					used_switch.push({'id':temp_item.id,'sw_status':temp_item.status})
				}
				//没有选中的开关，提示需要至少选择一个开关。
				if(used_switch.length == 0)
				{
					uni.showModal({
						title:'添加失败',
						icon:'fail',
						content:'至少设置一个开关状态！',
						showCancel:false
					})
					return;
				}
				
				//判断当前界面操作
				if(this.add_timer_action){
					//新增定时器操作
					console.log('Add option')
					//检测当前触发时间是不已经存在
					let find = false;
					for(let i in this.device_tiemr_list){
						let timer_item = this.device_tiemr_list[i];
						if(timer_item.timeout == this.timer_timeout){
							find = true;
							break;
						}
					}
					if(find){
						//触发时间与已经存在的时间冲突
						uni.showModal({
							title:'添加失败',
							icon:'fail',
							content:'触发时间已经存在，请重新设置。',
							showCancel:false
						})
						return;
					}
					//将需要新增的数据通过commonData传递给设备控制界面
					commonData.timerSet = {
						cmd:'add',
						timer_item:{
							'timeout':this.timer_timeout,
							'type': this.timer_type,
							'status': used_switch
						}
					}
					this.goBackToControl();
				}else{
					//修改定时器
					console.log('Modify option')
					//保存之前此定时器的状态
					let old_timer_item = this.device_tiemr_list[this.timer_modify_index];
					if(old_timer_item.timeout != this.timer_timeout){
						//时间发生了变化，验证后先删除，后插入
						let find = false;
						for(let i in this.device_tiemr_list){
							let timer_item = this.device_tiemr_list[i];
							if(timer_item.timeout == this.timer_timeout){
								find = true;
								break;
							}
						}
						if(find){
							//修改时间后与已经存在的时间冲突
							uni.showModal({
								title:'添加失败',
								icon:'fail',
								content:'触发时间已经存在，请重新设置。',
								showCancel:false
							})
							return;
						}else{
							//修改后的时间没有发生冲突，需要先删除，再添加
							//将需要修改的数据通过commonData传递给设备控制界面
							commonData.timerSet = {
								cmd:'del_add',
								timer_item:{
									'old_timeout':old_timer_item.timeout,
									'timeout':this.timer_timeout,
									'type': this.timer_type,
									'status': used_switch
								}
							}
						}
					}else{
						//将需要修改的数据通过commonData传递给设备控制界面
						commonData.timerSet = {
							cmd:'modify',
							timer_item:{
								'timeout':this.timer_timeout,
								'type': this.timer_type,
								'status': used_switch
							}
						}
					}
					
					//操作结束返回设备控制界面
					this.goBackToControl();
				}
			},
			
			//修改定时器时，单击删除定时器操作回调函数
			onAddTimerDeleteBtn(e){
				console.log('Delete option')
				//将需要删除的数据通过commonData传递给设备控制界面
				commonData.timerSet = {
					cmd:'del',
					timeout:this.timer_timeout,
					index:this.timer_modify_index
				}
				this.goBackToControl();
				//let del_timeout = this.device_tiemr_list[this.timer_modify_index].timeout;
				//this.delTimer(this.timer_modify_index)
				//this.publishWithID(this.device_info_id, "timer/del", JSON.stringify({index:this.timer_modify_index,timeout:del_timeout,length:this.device_tiemr_list.length}))
			},
			//单击取消按钮，什么也不干，返回设备控制界面
			onAddTimerCancelBtn(e){
				console.log('Cancle option')
				commonData.timerSet = {
					cmd:'cancel'
				}
				this.goBackToControl();
			},
		}
	}
</script>

<style lang="scss">
.container {
		font-size: 28rpx;
		line-height: 48rpx;

		.header-backgroud-box{
			height: 300rpx;
			display: flex;
			flex-direction: column;
			justify-content: center;
			background-color: white;
			//background-image: url('data:');
			background-size: 60%;
			background-repeat: no-repeat;
			background-position: 90% 0%;
			//border: solid 1rpx cyan;
			.header-backgroud-box-title{
				display: flex;
				margin-left: 50rpx;
				font-size: 2em;
				color: yellowgreen;
				line-height: 100rpx;
			}
			.header-backgroud-box-content{
				display: flex;
				margin-left: 50rpx;
				font-size: 32rpx;
				line-height: 50rpx;
				color: #77eeff;
			}
		}
		
		.add-timer-line {
			display: flex;
			flex-direction: row;
			margin: 20rpx;
		
			.add-timer-trigger {
				display: flex;
				flex-direction: row;
				flex-grow: 1;
				justify-content: space-around;
			}
		
			.add-timer-timeout {
				margin-left: 20rpx;
			}
		}
		
		.add-timer-switch-box {
			margin: 20rpx;
		
			.add-timer-switch-line {
				padding: 10rpx;
				margin: 10rpx 0rpx;
				display: flex;
				flex-direction: row;
				justify-content: space-around;
		
				// checkbox {
				// 	display: flex;
				// 	flex-direction: row;
				// }
			}
		
			.add-timer-select-checkbox-tips {
				display: flex;
				justify-content: center;
				margin-top: 30rpx;
			}
			
			.add-timer-switch-select-box{
				margin: 5rpx 10rpx;
			}
		}
	}
</style>
